import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_picker_plus/picker.dart';
import 'package:get/get.dart';
import 'package:life_service/color/hex.dart';
import 'package:life_service/extensions/ex_widget.dart';
import 'package:life_service/ui/draw_under_line.dart';
import 'package:life_service/utils/styles.dart';
import '../controller.dart';

class MineUsedAddPage extends GetView<MineUsedAddController> {
  const MineUsedAddPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: HexColor(HexColor.colorF2f2),
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(Get.mediaQuery.padding.top + 44),
        child: AnnotatedRegion<SystemUiOverlayStyle>(
          value: SystemUiOverlayStyle.dark,
          child: Container(
            padding: Get.mediaQuery.padding,
            alignment: Alignment.centerLeft,
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                bottom: BorderSide(
                  color: HexColor(HexColor.colorF2f2),
                ),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                TextButton(
                  onPressed: Get.back,
                  child: Text.rich(
                    TextSpan(
                      children: [
                        const WidgetSpan(
                          child: Icon(
                            CupertinoIcons.chevron_back,
                            size: 18,
                            color: Colors.black,
                          ),
                        ),
                        TextSpan(
                          text: ' 常用信息',
                          style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize16,
                            color: HexColor.color3333,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                IconButton(
                  onPressed: () {},
                  icon: Text(
                    '保存',
                    style: StylesUtils.customTextStyle(
                      color: HexColor.colorFf62,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 20),
              color: Colors.white,
              padding: EdgeInsets.only(left: (Get.width - 356)),
              child: Column(
                children: [
                  DrawUnderLine(
                    child: SizedBox(
                      height: 50,
                      child: Row(
                        children: [
                          Container(
                            width: 70,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '中文姓名',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                          Container(
                            width: 234,
                            alignment: Alignment.center,
                            child: TextField(
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                              decoration: InputDecoration(
                                hintText: '与证件姓名一致',
                                hintStyle: StylesUtils.customTextStyle(
                                  color: HexColor.color9999,
                                ),
                                border: InputBorder.none,
                                focusedBorder: InputBorder.none,
                                enabledBorder: InputBorder.none,
                                constraints: const BoxConstraints.expand(
                                    width: 234, height: 44),
                                contentPadding: const EdgeInsets.symmetric(
                                    vertical: 15, horizontal: 5),
                                isCollapsed: true,
                                isDense: true,
                                filled: false,
                              ),
                            ),
                          ),
                          IconButton(
                            onPressed: () {},
                            icon: Icon(
                              CupertinoIcons.trash_fill,
                              size: 20,
                              color: HexColor(HexColor.colorFf62),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  DrawUnderLine(
                    child: SizedBox(
                      height: 50,
                      child: Row(
                        children: [
                          Container(
                            width: 70,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '英文姓名',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                          Container(
                            width: 234,
                            alignment: Alignment.center,
                            child: TextField(
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                              decoration: InputDecoration(
                                hintText: '如李明填写LI',
                                hintStyle: StylesUtils.customTextStyle(
                                  color: HexColor.color9999,
                                ),
                                border: InputBorder.none,
                                focusedBorder: InputBorder.none,
                                enabledBorder: InputBorder.none,
                                constraints: const BoxConstraints.expand(
                                    width: 234, height: 44),
                                contentPadding: const EdgeInsets.symmetric(
                                    vertical: 15, horizontal: 5),
                                isCollapsed: true,
                                isDense: true,
                                filled: false,
                              ),
                            ),
                          ),
                          IconButton(
                            onPressed: () {},
                            icon: Icon(
                              CupertinoIcons.trash_fill,
                              size: 20,
                              color: HexColor(HexColor.colorFf62),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  DrawUnderLine(
                    child: SizedBox(
                      height: 50,
                      child: Row(
                        children: [
                          Container(
                            width: 70,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '英文名',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                          Container(
                            width: 234,
                            alignment: Alignment.center,
                            child: TextField(
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                              decoration: InputDecoration(
                                hintText: '如李明填写MING',
                                hintStyle: StylesUtils.customTextStyle(
                                  color: HexColor.color9999,
                                ),
                                border: InputBorder.none,
                                focusedBorder: InputBorder.none,
                                enabledBorder: InputBorder.none,
                                constraints: const BoxConstraints.expand(
                                    width: 234, height: 44),
                                contentPadding: const EdgeInsets.symmetric(
                                    vertical: 15, horizontal: 5),
                                isCollapsed: true,
                                isDense: true,
                                filled: false,
                              ),
                            ),
                          ),
                          IconButton(
                            onPressed: () {},
                            icon: Icon(
                              CupertinoIcons.trash_fill,
                              size: 20,
                              color: HexColor(HexColor.colorFf62),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 20),
              color: Colors.white,
              padding: EdgeInsets.only(left: (Get.width - 356)),
              child: Column(
                children: [
                  DrawUnderLine(
                    child: SizedBox(
                      height: 50,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '身份证',
                            style: StylesUtils.customTextStyle(
                              color: HexColor.color9999,
                            ),
                          ),
                          TextButton(
                            onPressed: () {
                              selectCard(context);
                            },
                            child: Text(
                              '添加',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.colorFf62,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  DrawUnderLine(
                    child: SizedBox(
                      height: 50,
                      child: Row(
                        children: [
                          Container(
                            width: 70,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '证件号码',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                          Container(
                            width: 234,
                            alignment: Alignment.center,
                            child: TextField(
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                              decoration: InputDecoration(
                                hintText: '请填写证件号码',
                                hintStyle: StylesUtils.customTextStyle(
                                  color: HexColor.color9999,
                                ),
                                border: InputBorder.none,
                                focusedBorder: InputBorder.none,
                                enabledBorder: InputBorder.none,
                                constraints: const BoxConstraints.expand(
                                    width: 234, height: 44),
                                contentPadding: const EdgeInsets.symmetric(
                                    vertical: 15, horizontal: 5),
                                isCollapsed: true,
                                isDense: true,
                                filled: false,
                              ),
                            ),
                          ),
                          IconButton(
                            onPressed: () {},
                            icon: Icon(
                              CupertinoIcons.trash_fill,
                              size: 20,
                              color: HexColor(HexColor.colorFf62),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 20),
              color: Colors.white,
              padding: EdgeInsets.only(left: (Get.width - 356)),
              child: Column(
                children: [
                  DrawUnderLine(
                    child: SizedBox(
                      height: 50,
                      child: Row(
                        children: [
                          Container(
                            width: 70,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '生日',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                          Container(
                            width: 234,
                            alignment: Alignment.center,
                            child: TextField(
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                              decoration: InputDecoration(
                                hintText: '请选择',
                                hintStyle: StylesUtils.customTextStyle(
                                  color: HexColor.color9999,
                                ),
                                border: InputBorder.none,
                                focusedBorder: InputBorder.none,
                                enabledBorder: InputBorder.none,
                                constraints: const BoxConstraints.expand(
                                    width: 234, height: 44),
                                contentPadding: const EdgeInsets.symmetric(
                                    vertical: 15, horizontal: 5),
                                isCollapsed: true,
                                isDense: true,
                                filled: false,
                              ),
                              readOnly: true,
                            ),
                          ),
                          IconButton(
                            onPressed: () {
                              showPickerSelectYMD(context);
                            },
                            icon: Icon(
                              CupertinoIcons.chevron_forward,
                              size: 20,
                              color: HexColor(HexColor.colorCccc),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  DrawUnderLine(
                    child: SizedBox(
                      height: 50,
                      child: Row(
                        children: [
                          Container(
                            width: 70,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '性别',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                          Wrap(
                            spacing: 25,
                            alignment: WrapAlignment.start,
                            crossAxisAlignment: WrapCrossAlignment.center,
                            children: [
                              IconButton(
                                onPressed: () {
                                  controller.gender.value = 1;
                                },
                                icon: Obx(
                                  () => Text.rich(
                                    TextSpan(
                                      children: [
                                        WidgetSpan(
                                          child: controller.gender.value == 1
                                              ? Icon(
                                                  CupertinoIcons
                                                      .checkmark_alt_circle_fill,
                                                  size: 20,
                                                  color: HexColor(
                                                      HexColor.colorFf62),
                                                )
                                              : Icon(
                                                  CupertinoIcons.circle,
                                                  size: 20,
                                                  color: HexColor(
                                                      HexColor.color9999),
                                                ),
                                          alignment:
                                              PlaceholderAlignment.middle,
                                        ),
                                        TextSpan(
                                          text: ' 男',
                                          style: StylesUtils.customTextStyle(
                                            color: HexColor.color3333,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                              IconButton(
                                onPressed: () {
                                  controller.gender.value = 0;
                                },
                                icon: Obx(
                                  () => Text.rich(
                                    TextSpan(
                                      children: [
                                        WidgetSpan(
                                          child: controller.gender.value == 0
                                              ? Icon(
                                                  CupertinoIcons
                                                      .checkmark_alt_circle_fill,
                                                  size: 20,
                                                  color: HexColor(
                                                      HexColor.colorFf62),
                                                )
                                              : Icon(
                                                  CupertinoIcons.circle,
                                                  size: 20,
                                                  color: HexColor(
                                                      HexColor.color9999),
                                                ),
                                          alignment:
                                              PlaceholderAlignment.middle,
                                        ),
                                        TextSpan(
                                          text: ' 女',
                                          style: StylesUtils.customTextStyle(
                                            color: HexColor.color3333,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                  ),
                  DrawUnderLine(
                    child: SizedBox(
                      height: 50,
                      child: Row(
                        children: [
                          Container(
                            width: 70,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '手机号',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                          Container(
                            width: 234,
                            alignment: Alignment.center,
                            child: TextField(
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                              decoration: InputDecoration(
                                hintText: '+86',
                                hintStyle: StylesUtils.customTextStyle(
                                  color: HexColor.color9999,
                                ),
                                border: InputBorder.none,
                                focusedBorder: InputBorder.none,
                                enabledBorder: InputBorder.none,
                                constraints: const BoxConstraints.expand(
                                    width: 234, height: 44),
                                contentPadding: const EdgeInsets.symmetric(
                                    vertical: 15, horizontal: 5),
                                isCollapsed: true,
                                isDense: true,
                                filled: false,
                              ),
                            ),
                          ),
                          IconButton(
                            onPressed: () {},
                            icon: Icon(
                              CupertinoIcons.trash_fill,
                              size: 20,
                              color: HexColor(HexColor.colorFf62),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  void selectCard(BuildContext context) {
    showModalBottomSheet(
        context: context,
        barrierColor: HexColor.rgba(0, 0, 0, 0.4),
        backgroundColor: Colors.white,
        constraints: const BoxConstraints.expand(height: 210),
        useSafeArea: true,
        enableDrag: false,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(36),
            topRight: Radius.circular(36),
          ),
        ),
        builder: (_) {
          return Column(
            children: [
              Expanded(
                child: DrawUnderLine(
                  child: Stack(
                    children: [
                      Center(
                        child: Text(
                          '证件类型',
                          style: StylesUtils.customTextStyle(
                            fontWeight: FontWeight.w700,
                            color: HexColor.color3333,
                            fontSize: StylesUtils.fontSize16,
                          ),
                        ),
                      ),
                      Positioned(
                        width: 60,
                        top: 0,
                        right: 0,
                        bottom: 0,
                        child: IconButton(
                          onPressed: Get.back,
                          icon: Icon(
                            CupertinoIcons.xmark,
                            size: 20,
                            color: HexColor(HexColor.colorCccc),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              ...controller.types.map(
                (str) => DrawUnderLine(
                  child: Container(
                    height: 50,
                    alignment: Alignment.center,
                    child: Text(
                      str,
                      style: StylesUtils.customTextStyle(
                        color: HexColor.color3333,
                      ),
                    ),
                  ).onTap(Get.back),
                ),
              ),
            ],
          );
        });
  }

  void showPickerSelectYMD(BuildContext context) {
    Picker(
        height: 300,
        itemExtent: 40,
        headerDecoration: const BoxDecoration(),
        containerColor: Colors.white,
        adapter: DateTimePickerAdapter(
            type: PickerDateTimeType.kYMD,
            yearSuffix: '年',
            monthSuffix: '月',
            daySuffix: '日',
            months: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ]),
        title: Text(
          '选择出生日期',
          style: StylesUtils.customTextStyle(
            color: HexColor.color3333,
            fontSize: StylesUtils.fontSize16,
            fontWeight: FontWeight.w700,
          ),
        ),
        cancelText: '取消',
        cancelTextStyle: StylesUtils.customTextStyle(color: HexColor.color9999),
        confirmText: '确定',
        confirmTextStyle:
            StylesUtils.customTextStyle(color: HexColor.colorFf62),
        onConfirm: (Picker picker, List value) {
          debugPrint('onConfirm = ${picker.adapter.text}');
        },
        onSelect: (Picker picker, int index, List<int> selected) {
          debugPrint('onSelect = ${picker.adapter.toString()}');
        }).showModal(context, backgroundColor: Colors.white);
  }
}
